<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="showDialog"
    width="600px"
    :before-close="handleClose"
  >
    <div class="edit-dialog">
      <el-form ref="form" :model="attribute" label-width="100px" :rules="rules">
        <el-form-item label="属性名称" prop="attributeName">
          <el-input
            v-model="attribute.attributeName"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="支持多选">
          <el-radio-group v-model="attribute.multiSelect">
            <el-radio :label="0">不支持</el-radio>
            <el-radio :label="1">支持</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否必填">
          <el-radio-group v-model="attribute.required">
            <el-radio :label="1">必填</el-radio>
            <el-radio :label="0">选填</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="属性值" prop="values">
          <el-table :data="attribute.values" :border="true">
            <el-table-column label="属性值" align="center">
              <template v-slot="scope">
                <el-input
                  v-model="scope.row.optionKey"
                  maxlength="10"
                  show-word-limit
                />
              </template>
            </el-table-column>
            <el-table-column label="加价（元）" align="center">
              <template v-slot="scope">
                <el-input-number
                  style="width: 100px"
                  v-model="scope.row.price"
                  controls-position="right"
                  :min="0"
                  :precision="2"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template v-slot="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.$index)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="attrbutes-wrap mt10">
            <el-button
              type="text"
              icon="el-icon-plus"
              @click="addAttributeValue"
              >添加属性值</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { attributeAdd, attributeEdit } from "@/api/goods/attribute.js";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    editAttributeData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      dialogTitle: "添加属性",
      rules: {
        attributeName: [
          { required: true, message: "请输入属性名称", trigger: "blur" },
        ],
        values: [
          { required: true, message: "属性值不能为空", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (
                value.length === 0 ||
                value.some((item) => item.optionKey.trim() === "")
              ) {
                callback(new Error("属性值不能为空"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      attribute: {
        attributeName: "",
        multiSelect: 0,
        required: 1,
        values: [],
      },
    };
  },
  created() {
    if (this.editAttributeData) {
      this.attribute = Object.assign(this.attribute, this.editAttributeData);
      this.dialogTitle = "修改属性";
    }
  },
  methods: {
    addAttributeValue() {
      this.attribute.values.push({ optionKey: "", price: 0 });
    },
    handleDelete(index) {
      this.attribute.values.splice(index, 1);
    },
    submitForm() {
      this.$refs.form.validate((flag) => {
        if (flag) {
          if (this.attribute.attributeId) {
            attributeEdit(this.attribute).then((res) => {
              this.$modal.msgSuccess(res.msg);
              this.$emit("confirm-add");
              this.handleClose();
            });
          } else {
            attributeAdd(this.attribute).then((res) => {
              this.$modal.msgSuccess(res.msg);
              this.$emit("confirm-add");
              this.handleClose();
            });
          }
        }
      });
    },

    handleClose() {
      this.$emit("update:showDialog", false);
    },
  },
};
</script>

<style scoped>
.attrbutes-wrap {
  text-align: center;
  border-radius: 5px;
  background: #F7F7F7;
}
</style>
